<template>
  <div class="container">
    <div class="row margin-t10-b20">
      <!-- 左侧 -->
      <div class="col-8">
        <blog-show ref="blogShowDOM" />
      </div>
      <!-- 左侧结束 -->

      <!-- 右侧 -->
      <div class="col-4">
        <div>
          <textarea
            class="form-control"
            rows="4"
            v-model="content"
          ></textarea>
          <div class="margin-t10-b10">
            <div
              class="show-image"
              v-if="imgUrl"
            >
              <img
                :key="item"
                :src="item"
                alt="图片"
                style="width: 80px; margin-right: 10px"
                v-for="item in imgUrl"
              />
              <button
                @click="imgUrl = null"
                class="btn btn-danger"
              >清空</button>
            </div>
            <a
              @click.prevent="selectImage"
              href="#"
            >
              <i class="fa fa-picture-o"></i>
              插入图片
            </a>
            <input
              @change="imageInputChange"
              accept="image/*"
              hidden
              multiple
              ref="selectInput"
              type="file"
            />
            <button
              @click="sendBlog"
              class="btn btn-primary"
              id="btn-submit"
            >发表</button>
          </div>
        </div>
        <!-- <hr style="margin: 20px 0 30px" />
        <div class="user-list right-item">
          <p class="title bold">
            ✨
            关注（{{$store.state.userInfo.follower}}）
            <i
              class="iconfont icon-below-s"
              title="展开"
            ></i>
          </p>
        </div>

        <div class="user-list right-item">
          <p class="title bold">
            💋
            粉丝（{{$store.state.userInfo.fans}}）
            <i
              class="iconfont icon-below-s"
              title="展开"
            ></i>
          </p>
        </div> -->
      </div>

      <!-- 右侧结束 -->
    </div>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue";

import BlogShow from "./children/BlogShow";

import { createBlog } from "../../network/blog";
import { upload } from "../../network/user";
export default {
  name: "Home",
  components: { BlogShow },
  setup() {
    const selectInput = ref(null); //文件选择DOM
    const blogShowDOM = ref(null); // blog-show组件DOM
    const imgUrl = ref(null); //存放选择图片的url
    const content = ref(null); // 需要发表的微博内容

    //调起文件选择
    const selectImage = () => {
      selectInput.value.click();
    };
    //文件选择完成
    const imageInputChange = () => {
      let imgArr = [];
      for (let img of selectInput.value.files) {
        imgArr.push(window.URL.createObjectURL(img));
      }
      imgUrl.value = imgArr;
    };
    // 发表微博
    const sendBlog = async () => {
      if (!content.value) {
        return alert("微博内容不能为空");
      }
      const trueImgUrl = [];
      for (let img of selectInput.value.files) {
        const fd = new FormData();
        fd.append("file", img);
        try {
          const result = await upload(fd);
          trueImgUrl.push("http://47.95.5.129:8000" + result.data.url);
        } catch (error) {
          alert("上传图片失败", error);
        }
      }
      const data = {
        content: content.value,
        image: JSON.stringify(trueImgUrl),
      };
      const result = await createBlog(data);
      if (result.status !== 200) {
        return alert(result.message);
      }
      blogShowDOM.value.gainBlogs(1);
      content.value = imgUrl.value = selectInput.value.value = null;
      return alert(result.data);
    };

    return {
      selectInput,
      imgUrl,
      blogShowDOM,
      content,
      selectImage,
      imageInputChange,
      sendBlog,
    };
  },
};
</script>

<style scoped lang='stylus' >
.margin-t10-b20
  margin 10px 0 0

.show-image
  margin-top 10px

#btn-submit
  display block
  margin 10px 0

.bold
  font-weight bold
  color #666
  cursor pointer
</style>